<template>
	<view class="container"><!-- 页面 -->
		<image class="head_icon" :src="icon" style="width: 100px; height: 100px;"></image><!-- 头像 -->
		<text class="username">{{username}}</text><!-- 姓名 -->
		<view style="width: 100%;"><!-- 大盒子 -->
			<view class="entries"><!-- 文字盒子 -->
			<view class="entry"> <!-- 个人信息盒子 -->
				<text class="entry_text">个人信息</text><!-- 个人信息 -->
				<image class="entry_arrow" src="../../static/more.png" style="width: 50px; height: 50px;"></image><!--箭头 -->
			</view >
			<view class="entry"><!-- 订单列表盒子 -->
				<text class="entry_text">订单列表</text><!-- 订单列表 -->
				<image class="entry_arrow" src="../../static/more.png" style="width: 50px; height: 50px;"></image><!--箭头 -->
			</view>
			<view class="entry"><!-- 修改密码盒子 -->
				<text class="entry_text">修改密码</text><!--修改密码 -->
				<image class="entry_arrow" src="../../static/more.png" style="width: 50px; height: 50px;"></image><!--箭头 -->
			</view>
			<view class="entry"><!--意见反馈盒子 -->
				<text class="entry_text">意见反馈</text><!--意见反馈 -->
				<image class="entry_arrow" src="../../static/more.png" style="width: 50px; height: 50px;"></image><!--箭头 -->
			</view>
		</view><!-- 按钮盒子 --> 
		<button type="primary" style="margin: 0 2opx;">退出</button><!-- 按钮 --> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon:'/static/logo.png',
				username:"何乐大笨蛋"
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.container{
		display: flex;/* 设置容器为弹性布局容器 */
		flex-direction: column;/* 主轴从上到下 */
		align-items: center;/* 内部组件交叉轴居中 */
		width: 100%;
		padding-top: 10%;
	}
	.entries{
		width: '90%';
		padding: 20px;
	}
	 .entry{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
        height: 60px;
		justify-content: space-between;/* 两端对齐 */
		border-top: 1px solid #ccc ;
		border-bottom: 1px solid #ccc ;
	}
	.entry:last-child{
		border-bottom: 1px solid #ccc;
	}
	.entry text{
		font-size: 20px;
	}
</style>